<template>
	<view class="on_content" v-for="item in content" key="userid">
		<view class="m"  v-if="item.userid==user.getId()">
			<view class="my">
				<text class="mytext">
				{{item.message}}
				</text>
			</view>
			<image class="img" :src="user.getPic()" mode=""></image>
		</view>
		<view class="y" v-if="item.userid==f_id">
			<image class="img" :src="f_pic" mode=""></image>
			<view class="you">
				<text class="youtext">
					{{item.message}}
				</text>
			</view>
		</view>
	</view>
	<view class="ele">
		<input class="input" id="name" v-model="resource" placeholder="编辑消息"/>
		<button @click="ser(resource)" >发送</button>
	</view>
</template>

<script lang="ts" setup>
	import{onLoad,onShow,onUnload} from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue';
	import { useCounterStore } from '../../store/user';
	
	interface Content{
		userid:string;
		message:string;
	}
	interface Message{
		userId:string;
		toId:string;
		message:string;
	}
	
	const resource = ref<string>();
	let f_id=null;
	let f_pic=ref<string>();
	
	var content = ref<Content[]>([{
		userid:"1",
		message:"a"
	}]);
	
	const user = useCounterStore();
	
	const ser=(message :string)=>{
		let ms=reactive<Message>({
		userId:uni.getStorageSync("loginId"),
		toId:f_id,
		message:message,
		})
		
		uni.sendSocketMessage({
			data: JSON.stringify(ms),
			success() {
				
			}
		});
		resource.value=null;
	}
	
	onLoad((option)=>{
		console.log(option.id);
		f_id=option.id;
	})
	onShow(()=>{
		uni.connectSocket({
			header:{
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
			},
			url:'ws://121.40.242.216:8081/api/webSocketServer/'+encodeURIComponent(uni.getStorageSync("loginId"))
		})
		//打开websocket回调
		uni.onSocketOpen(function (res) {
			console.log('WebSocket连接已打开！');
		});
		//连接失败回调
		uni.onSocketError(function (res) {
			console.log('WebSocket连接打开失败，请检查！');
			uni.showToast({
				title:'WebSocket连接打开失败，请检查！',
				icon:'none'
			})
		});
		 //服务端过来内容之后打印
		uni.onSocketMessage(function (res) {
			 console.log('收到服务器内容：' + res.data);
			const data=ref<Message>(JSON.parse(res.data))
			console.log(data.value.userId)
			if(data.value.userId==user.getId()){
				console.log("y")
				
				var mid :Content ={
				userid:data.value.userId,
				message:data.value.message
				}||null
				
				content.value.push(mid)
				console.log(content.value)
			}
			if(data.value.userId==f_id){
				console.log("t")
				var mid :Content={
				userid:data.value.userId,
				message:data.value.message
				}||null
				
				content.value.push(mid);
				console.log(content.value)
			}
		});
		 //关闭websocket打印
		uni.onSocketClose(function (res) {
			console.log('WebSocket 已关闭！');
			uni.showToast({
			title:'WebSocket 已关闭！',
			icon:'none'
		})
		});
		uni.request({
		    url: 'http://121.40.242.216:8081/api/user/one',
			method:'GET',
		    data: {
				user_id:f_id
		    },
		    header: {
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
		        console.log(res.data);
				f_pic.value=res.data.data!.picture;
		    }
		});
	})
	
onUnload(()=>{
	uni.closeSocket();
})

</script>


<style>
.on_content{
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	width: 100%;
}
.m{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.y{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.img{
	width: 100rpx;
	height: 100rpx;
}
.my{
	background: rgb(148.6, 212.3, 117.1);
	padding: 2rpx;
	border-radius: 20rpx;
	border-style: solid;
	border-width: 5rpx;
}
.mytext {  
    width: 100px;               /* 设置容器的宽度 */  
    min-height: 20px;          /* 容器的最小高度 */  
    outline: 0;                /* 无轮廓 */  
    border: 1px; 				/* 边框样式 */  
    font-size: 13px;           /* 字体大小 */  
    overflow-wrap: break-word; /* 自动换行属性（现代浏览器） */
    word-wrap: break-word;     /* 兼容性属性（旧浏览器） */
    white-space: normal;       /* 允许正常换行 */  
    word-break: break-all;     /* 强制在每个单词的任意地方断开 */  
}
.you{
	background: rgb(235.9, 245.3, 255);
	padding: 2rpx;
	border-radius: 20rpx;
	border-style: solid;
	border-width: 5rpx;
}
.youtext{
	width: 100px;               /* 设置容器的宽度 */
	min-height: 20px;          /* 容器的最小高度 */  
	outline: 0;                /* 无轮廓 */  
	border: 1px; 				/* 边框样式 */  
	font-size: 13px; 
	overflow-wrap: break-word; /* 自动换行属性（现代浏览器） */
	word-wrap: break-word;     /* 兼容性属性（旧浏览器） */
	white-space: normal;       /* 允许正常换行 */  
	word-break: break-all; 
}
.input{
		width: 600rpx;
		height: 100rpx;
		background: aliceblue;
		border-radius: 30rpx;
	}
</style>
